<template>
    <div class="navList">
        <LoadingSpinner v-if="this.data.data == null"></LoadingSpinner>
        <template v-else>
            <div class="category">
                <div class="goods" v-for="item in menuData.category" :key="item.cat_id">
                    <img :src="item.touch_icon" alt="">
                    <span class="title">{{ item.cat_name }}</span>
                </div>
            </div>
            <div class="brand">
                <h1>品牌精选</h1>
                <div class="list">
                    <div class="goods" v-for="item in menuData.brand" :key="item.brand_id">
                        <img :src="item.brand_logo" alt="">
                        <span class="title">{{ item.brand_name }}</span>
                    </div>
                </div>
            </div>
            <div class="goodsList">
                <div class="goods" v-for="item in goodsData" :key="item.goods_id">
                    <img :src="item.goods_img" alt="">
                    <div class="info">
                        <span class="title">
                            <span class="teMai" v-if="item.is_promote == 1">特卖</span>
                            {{ item.goods_name }}</span>
                        <span class="price">
                            <div class="newPrice">{{ item.shop_price_formated }}</div>
                            <div class="oldPrice" v-if="item.is_promote == 1">{{ item.market_price_formated }}</div>
                        </span>
                        <span class="label">
                            <div class="shopType" v-if="item.rz_shop_name == '大商创旗舰店'">进店</div>
                            <div class="shopType" v-else>自营</div>
                            <img :src="label.formated_label_image" alt="" v-for="label in item.goods_label"
                                :key="label.id">
                        </span>
                        <div class="cart">
                            <span class="count">{{ item.sale }}人已购买</span>
                            <i class="iconfont">&#xe655;</i>
                        </div>
                    </div>
                </div>
            </div>

        </template>
        <LoadingSpinner v-if="this.isLoadingMore"></LoadingSpinner>
        <div class="nomore" v-if="isNoMore">没有更多了</div>
    </div>
</template>

<script>
import LoadingSpinner from '@/components/LoadingSpinner.vue'
import { PostData } from '@/api'

export default {
    props: ['data'],
    data() {
        return {
            menuData: null,
            goodsData: null,
            page: 1,
            isLoadingMore: false,
            isNoMore:false,
        }
    },
    components: {
        LoadingSpinner
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        async handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            const documentHeight = Math.max(
                document.body.scrollHeight,
                document.documentElement.scrollHeight
            );
            const threshold = 1; // 可根据需要调整阈值
            if (documentHeight - scrollTop - windowHeight <= threshold) {
                // console.log('到达页面底部')
                if (!this.isLoadingMore) {
                    this.isLoadingMore = true
                    
                    this.page++
                    const jsonData = {
                        cat_id: this.data.cat_id,
                        page: this.page
                    }
                    const newData = await PostData('/catalog/goodslist', jsonData)
                    if (newData.length == 0) {
                        this.isLoadingMore = false
                        window.removeEventListener('scroll', this.handleScroll)
                        this.isNoMore=true
                        return
                    }
                    // console.log('newData:', newData)
                    this.goodsData = this.goodsData.concat(newData)
                    setTimeout(() => {
                        this.isLoadingMore = false;
                    }, 500);
                }
            }
        }
    },
    watch: {
        data: {
            handler(newVal) {
                this.menuData = newVal.data
                this.goodsData = newVal.goodsList
            },
            immediate: true,
            deep: true
        }
    }
}
</script>

<style scoped>
.navList {
    width: 94.6667vw;
    margin: 0 auto;
}

.category {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 2.6667vw;
    box-sizing: border-box;
    border-radius: 2.6667vw;
    margin: 2.6667vw 0;

    .goods {
        width: 17.8667vw;
        height: 24.5333vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;

        img {
            width: 14.4vw;
            height: 14.4vw;
        }

        .title {
            font-size: 3.2vw;
            line-height: 8vw;
        }
    }
}

.brand {
    width: 100%;
    background-color: #fff;
    /* padding: 2.6667vw; */
    box-sizing: border-box;
    border-radius: 2.6667vw;
    margin: 2.6667vw 0;

    h1 {
        width: 100%;
        height: 13.8667vw;
        line-height: 13.8667vw;
        font-size: 4vw;
        text-align: left;
        padding-left: 5.3333vw;
        font-weight: bold;
    }

    .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .goods {
            width: 23.6533vw;
            height: 24.5333vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            img {
                width: 18.9333vw;
                height: 8.2667vw;
            }

            .title {
                font-size: 3.2vw;
                line-height: 8vw;
            }
        }
    }
}

.goodsList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5467vw;

    .goods {
        width: 46.56vw;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 1.3333vw;
        overflow: hidden;

        >img {
            width: 46.56vw;
            height: 46.56vw;
        }

        .info {
            display: flex;
            flex-direction: column;
            padding: 2.6667vw;
            gap: 2.6667vw;

            .title {
                width: 40vw;
                height: 10.1333vw;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 5.0667vw;
                font-size: 3.7333vw;
                text-align: left;

                .teMai {
                    height: 6.4vw;
                    line-height: 5.0667vw;
                    background-color: red;
                    color: #fff;
                    font-weight: bold;
                    padding: .5333vw 1.3333vw;
                    font-size: 12px;
                    border-radius: 2.6667vw;
                }
            }

            .price {
                display: flex;
                gap: 2.6667vw;

                .newPrice {
                    color: red;
                    font-size: 3.7333vw;
                    font-weight: bold;
                }

                .oldPrice {
                    font-size: 3.2vw;
                    text-decoration: line-through;
                    color: #aaa;
                }
            }

            .label {
                display: flex;
                height: 4.2667vw;
                gap: 1.3333vw;

                .shopType {
                    font-size: 2.6667vw;
                    background-color: red;
                    padding: .8vw 1.3333vw;
                    border-radius: .5333vw;
                    color: #fff;
                }

                img {
                    width: 7.4667vw;
                    height: 4.2667vw;
                }
            }

            .cart {
                font-size: 3.2vw;
                line-height: 5.3333vw;
                display: flex;
                justify-content: space-between;

                i.iconfont {
                    color: red;
                    font-size: 5.3333vw;
                }
            }
        }
    }
}
.nomore{
    font-size: 4.2667vw;
    color: #aaa;
    margin-top: 8vw;
}
</style>